<!--
 * @Descripttion: 应收核销
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-14 09:10:42
 * @LastEditors: GW
 * @LastEditTime: 2021-10-15 12:02:09
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <!-- <a-col :class="!editMask?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="!editMask?handlerSubmit():''">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">确认</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div :class="currentId?'':'btns-disable'">
                                <div class="btns" @click="currentId?handleRemove(1):''">
                                    <a-icon class="btns-icon" type="stop" />
                                    <div class="btns-text">结账</div>
                                </div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="cancelVerification">
                                <a-icon class="btns-icon" type="build" />
                                <div class="btns-text">核销</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="syncFun">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="verification-wrapper">
                <h3 class="text-center">
                    <span class="text-name">{{pageTitle}}</span><br>
                </h3>
                <section>
                    <div class="table-item">
                        <p class="table-title-t">应收单据：</p>
                        <a-table :columns="columns" :data-source="dataSource" :pagination="false" :row-selection="{ selectedRowKeys: selectedKeysTop, onChange: onSelectChangeTop,columnWidth:20 }" bordered></a-table>
                    </div>
                    <div class="table-item">
                        <p class="table-title-t">收款单据：</p>
                        <a-table :columns="columnsList" :data-source="dataSourceList" :pagination="false" :row-selection="{ selectedRowKeys: selectedKeysDown, onChange: onSelectChangeDown,columnWidth:20 }" bordered></a-table>
                    </div>
                </section>
            </div>

        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>
    </div>
</template>
<script>
import { save, examine, remove, getCode, verListApi, verApi } from '@/api/finance/receiveManagement/receivableVoucher';
import { numberFormat } from "@/utils/tool/number-formart";
export default {
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            formLayout: "inline",
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 8
            },
            //----------↑样式----------
            pageTitle: this.$route.meta.name,
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0,
                size: 'small',
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={20}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.getDataList();
                }
            },
            columns: [{
                title: '序号',
                dataIndex: 'number',
                width: 30,
                customRender: (text, record, index) => {
                    return index + 1;
                },
                align: 'center',
            }, {
                title: '单据编号',
                dataIndex: 'voucherCode',
                width: 150,
                align: 'center',
                ellipsis: true,
            }, {
                title: '单据日期',
                dataIndex: 'voucherDate',
                width: 150,
                align: 'center',
                ellipsis: true,
            }, {
                title: '价税合计',
                dataIndex: 'priceTaxTotal',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '金额',
                dataIndex: 'amount',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '税额',
                dataIndex: 'tax',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '应收金额',
                dataIndex: 'shouldAmount',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '已核销金额',
                dataIndex: 'verificationAmount',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '未核销金额',
                dataIndex: 'noMoneyGiven',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text, record, index) => {
                    return numberFormat(Number(record.priceTaxTotal) - Number(record.verificationAmount));
                }
            }, {
                title: '客户名称',
                dataIndex: 'crmName',
                width: 150,
                align: 'left',
                ellipsis: true,
            }],
            dataSource: [],//应收应付
            dataSourceList: [],//收付款
            columnsList: [{
                title: '序号',
                dataIndex: 'number',
                width: 30,
                customRender: (text, record, index) => {
                    return index + 1;
                },
                align: 'center',
            }, {
                title: '单据编号',
                dataIndex: 'voucherCode',
                width: 150,
                align: 'center',
                ellipsis: true,
            }, {
                title: '单据日期',
                dataIndex: 'voucherDate',
                width: 150,
                align: 'center',
                ellipsis: true,
            }, {
                title: '应收金额',
                dataIndex: 'shouldAmount',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '实收金额',
                dataIndex: 'amount',
                width: 150,
                align: 'right',
                ellipsis: true,
                customRender: (text) => {
                    return numberFormat(text);
                }
            }, {
                title: '往来单位',
                dataIndex: 'partnerName',
                width: 150,
                align: 'left',
                ellipsis: true,
            }],
            selectedKeysTop: [],
            selectedKeysDown: [],
            selectedRowsTop: [],//应收应付款
            selectedRowsDown: [],//收付款
        };
    },
    created () {
        this.getPlanList();
    },
    watch: {

    },
    activated () {
        this.getPlanList();
    },
    methods: {
        moment,
        // 获取动态表单数据
        getPlanList () {
            let postData = {
                dataSource: 'ReceivableVoucher',
                orderId: this.$route.query.orderId,
            }
            verListApi(postData).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.receivableMainList;//应收应付
                    this.dataSourceList = res.data.paymentMainList;//收付款
                }
            })
        },
        onSelectChangeTop (keys, rows) {
            this.selectedKeysTop = keys;
            this.selectedRowsTop = rows;
        },
        onSelectChangeDown (keys, rows) {
            this.selectedKeysDown = keys;
            this.selectedRowsDown = rows;
        },
        //核销
        cancelVerification () {
            if (this.selectedKeysTop.length <= 0) {
                this.$message.warning('请选择需要核销的应收单');
                return;
            }
            if (this.selectedKeysDown.length <= 0) {
                this.$message.warning('请选择需要核销的收款单');
                return;
            }

            this.selectedRowsTop.forEach(item => {
                item.createDate = null;
                item.updateDate = null;
                item.voucherDate = null;
                item.reviewerDate = null;
            });
            this.selectedRowsDown.forEach(item => {
                item.createDate = null;
                item.updateDate = null;
                item.voucherDate = null;
                item.reviewerDate = null;
            });
            let requestData = {
                receivableMainList: this.selectedRowsTop,
                paymentMainList: this.selectedRowsDown,
            }
            verApi(requestData).then((response) => {
                if (response.code === 200) {
                    this.$message.success('核销成功');
                    this.selectedKeysTop = [];
                    this.selectedRowsTop = [];
                    this.selectedKeysDown = [];
                    this.selectedRowsDown = [];
                    this.getPlanList();
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        //修改
        handleEdit () {
            this.editMask = false;
        },
        syncFun () {
            //刷新
            this.getPlanList();
        }
    },

};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .verification-wrapper {
        padding: 10px;
        height: 100%;
        overflow-y: auto;
        font-size: 14px;
        .text-name {
            padding-bottom: 5px;
        }
        .table-item {
            min-height: 300px;
        }
        .table-title-t {
            font-size: 16px;
            font-weight: 700;
        }
    }

    .atable-edit {
        .ant-table-tbody > tr > td {
            padding: 0px 2px !important;
        }
    }
</style>